<template>
 <div class="addcustomergroup_container">
  <Row>
      <Col span="24">
        <div class="nav">
            <h3 class="addcustomergroup_title">新建客户分组</h3>
        </div>
      </Col>
  </Row>

  <Row style="width:100%;background-color: #fff;padding-bottom:4vh;">
    <Col span="12" style="padding-left: 2vw;" >
      <Label>人群分类:</Label>
      <Select v-model="formDynamic.targetCategoryId" placeholder="请选择..." style="width:200px;"  clearable>
        <Option
          v-for="item in noRecycelTabs"
          :value="item.id"
          :key="item.name"
        >{{ item.name }}</Option>
      </Select>
    </Col>
      <Col span="12" style="background-color:#fff;" pull="5">
         <Label >人群名称:</Label>
         <Input v-model="formDynamic.name" type="text" placeholder="请输入人群名称，仅检查名称重复" style="width:300px;"></Input>
         <Button type="primary" icon="ios-search" :loading="loadingSearch" @click="ruleValidate">
           <span v-if="!loadingSearch">搜索</span>
           <span v-else>Loading...</span>
         </Button>
      </Col>
  </Row>

  <div class="condition_box">
    <Row>
      <Col span="8">
         <div class="condition_box_left">
            <div class="condition_box_left_header">
                 <span class="condition_box_left_header_number">1</span>
                 <span class="">选择条件</span>
            </div>
            <div class="condition_box_left_box">
                <div class="basic_attr_box" v-for="(item,index) in conditionlist" :key="index">
                  <h4 class="integral_info_title">{{item.groupName}}</h4>
                  <Button class="tag" v-for="(criteriaItem,index) in item.conditionlist" :key="index" v-bind:class="{active: formDynamic.items.some( p => p.id === criteriaItem.id)}"  @click="handleAdd(criteriaItem, index)"  >{{criteriaItem.name}}</Button>
                </div>

            </div>
         </div>
      </Col>
      <Col span="16">
         <div class="condition_box_right">
            <div class="condition_box_right_header">
              <span class="condition_box_right_header_number">2</span>
              <span class="">设置已筛选得条件</span>
            </div>
            <div class="condition_box_right_box">
              <Form ref="formDynamic" :model="formDynamic" :rules="ruleValidateSave" style="width: 100%">
                <FormItem v-for="(item, index) in formDynamic.items" :key="index" :prop="item.code">
                  <!-- 天猫昵称 -->
                  <!--<FormItem v-for="(singleItem, singleIndex) in singleInputAttr" :key="singleIndex" :prop="singleItem.code" v-if="item.id==singleItem.id">-->
                    <div class="singlebox" v-for="(singleItem, singleIndex) in singleInputAttr" v-if="item.id==singleItem.id">
                        <div class="box_header">
                            <Row class="nav">
                                <Col span="22">
                                    <Breadcrumb separator=">">
                                        <BreadcrumbItem to="">{{singleItem.criteriaGroupName}}</BreadcrumbItem>
                                        <BreadcrumbItem to="">{{singleItem.name}}</BreadcrumbItem>
                                    </Breadcrumb>
                                </Col>
                                <Col span="2">
                                    <button class="btn_del" @click="handleRemove(item.id)"><Icon size="24" type="ios-trash" /></button>
                                </Col>
                            </Row>
                        </div>
                        <div style="padding:3vh;">
                            <Row>
                            <Col span="5">
                                <Row>
                                    <Col span="10">
                                        <label for="" style="width:20px;">{{singleItem.name}}</label>
                                    </Col>
                                </Row>
                            </Col>
                            <Col span="15">
                                <Input v-model="item.valueData" placeholder="逗号分隔可写多个，例如'a,b'" style="width:200px;margin-left:-3vw;" />
                            </Col>
                            </Row>
                        </div>
                    </div>
                  <!--</FormItem>-->

                    <!-- 年龄 -->
                    <!--<FormItem v-for="(regionItem, regionIndex) in regionAttr" :key="regionIndex">-->
                        <div class="singlebox" v-if="item.id==regionItem.id" v-for="(regionItem, regionIndex) in regionAttr" :key="regionIndex">
                            <div class="box_header">
                                <Row class="nav">
                                    <Col span="22">
                                        <Breadcrumb separator=">">
                                            <BreadcrumbItem to="">{{regionItem.criteriaGroupName}}</BreadcrumbItem>
                                            <BreadcrumbItem to="">{{regionItem.name}}</BreadcrumbItem>
                                        </Breadcrumb>
                                    </Col>
                                    <Col span="2">
                                        <button class="btn_del" @click="handleRemove(regionItem.id)"><Icon size="24" type="ios-trash" /></button>
                                    </Col>
                                </Row>
                            </div>
                            <div style="padding:3vh;">
                                <Row>
                                <Col span="5">
                                <label for="" style="width:20px;">{{regionItem.name}}</label>
                                </Col>
                                <Col span="6" push="1">
                                    <Input v-model="item.valueData1" placeholder="请输入数字" style="width:150px;margin-left:-3vw;" v-if="regionItem.fieldType=='int'"/>
                                    <Input v-model="item.valueData1" placeholder="请输入数字" style="width:150px;margin-left:-3vw;" v-if="regionItem.fieldType=='double'"/>
                                    <DatePicker v-model="item.valueData1" type="datetime" format="yyyy-MM-dd HH:mm:ss" confirm placeholder="请选择日期" style="width: 150px" v-if="regionItem.fieldType=='date'"></DatePicker>
                                </Col>
                                <Col span="2">~</Col>
                                <Col span="6" push="1">
                                  <Input v-model="item.valueData2" placeholder="请输入数字" style="width:150px;margin-left:-3vw;" v-if="regionItem.fieldType=='int'"/>
                                  <Input v-model="item.valueData2" placeholder="请输入数字" style="width:150px;margin-left:-3vw;" v-if="regionItem.fieldType=='double'"/>
                                  <DatePicker v-model="item.valueData2" type="datetime" format="yyyy-MM-dd HH:mm:ss" confirm placeholder="请选择日期" style="width: 150px" v-if="regionItem.fieldType=='date'"></DatePicker>
                                </Col>
                                </Row>
                            </div>
                        </div>
                    <!--</FormItem>-->

                    <!-- 渠道 -->
                    <!--<FormItem v-for="(enumItem, enumindex) in enumAtrr" :key="enumindex">-->
                      <div class="targetbox" v-if="item.id==enumItem.id" v-for="(enumItem, enumindex) in enumAtrr" :key="enumindex">
                        <div class="box_header">
                          <Row class="nav">
                            <Col span="22">
                              <Breadcrumb separator=">">
                                <BreadcrumbItem to="">{{enumItem.criteriaGroupName}}</BreadcrumbItem>
                                <BreadcrumbItem to="">{{enumItem.name}}</BreadcrumbItem>
                              </Breadcrumb>
                            </Col>
                            <Col span="2">
                              <button class="btn_del" @click="handleRemove(item.id)"><Icon size="24" type="ios-trash" /></button>
                            </Col>
                          </Row>
                        </div>
                        <div style="margin:2vh 0px 0px 1vw;">
                          <Row v-if="enumItem.optionType === 1">
                            <label for="">请选择{{enumItem.name}}</label>
                            <Select v-model="item.valueData" style="width:200px"  clearable>
                              <Option v-for="(item,index) in enumItem.optionList" :key="index" :value="item.value">{{ item.name }}</Option>
                            </Select>
                          </Row>
                          <Row v-if="enumItem.optionType === 2">
                            <div >
                              <!--<Checkbox
                                :indeterminate="indeterminate"
                                :value="checkAll"
                                @click.prevent.native="handleCheckAll">全选</Checkbox>-->
                            </div>

                            <CheckboxGroup v-model="item.valueDataArray" >
                              <Checkbox :key="index" :label="item.value" v-for="(item,index) in enumItem.optionList">{{item.name}}</Checkbox>
                            </CheckboxGroup>
                          </Row>
                        </div>
                      </div>


                    <!-- 粉丝地域 -->
                    <!--<FormItem v-for="(addressItem, addressindex) in addressAttr" :key="addressindex">-->
                      <div class="enumbox" v-if="item.id==addressItem.id" style="height: auto;" v-for="(addressItem, addressindex) in addressAttr" :key="addressindex">
                        <div class="box_header">
                          <Row class="nav">
                            <Col span="22">
                              <Breadcrumb separator=">">
                                <BreadcrumbItem>{{addressItem.criteriaGroupName}}</BreadcrumbItem>
                                <BreadcrumbItem>{{addressItem.name}}</BreadcrumbItem>
                              </Breadcrumb>
                            </Col>
                            <Col span="2">
                              <button class="btn_del" @click="handleRemove(item.id)"><Icon size="24" type="ios-trash" /></button>
                            </Col>
                          </Row>
                        </div>
                        <div>
                            <div style="border-bottom: 1px solid #e9e9e9;padding: 0 15px">
                                <el-checkbox :indeterminate="addressItem.indeterminate" v-model="addressItem.checkAll" @change="handleCheckAllProvince(addressindex)">全选</el-checkbox>
                            </div>
                            <div style="padding:5px 15px;">
                                <div v-for="(item,index) in provincelist" style="display: inline-block;width:160px;margin:0px 20px 5px 0px;" :key="index">
                                    <el-checkbox-group v-model="item.checkAllGroup" @change="checkProvince">
                                       <el-checkbox :label="item.areaId" :key="index">{{item.name}}</el-checkbox>
                                        <el-popover trigger="click" placement="bottom" width="400" height="300">
                                            <i class="el-icon-arrow-down" @click="showPopover(item.areaId)" slot="reference" style="font-size:10px;"></i>
                                            <div v-for="(item,index) in citylist" :key="index" style="display: inline-block;width:160px;margin:0px 20px 5px 0px;">    
                                                <!-- <el-checkbox-group v-model="checkcity" > -->
                                                    <el-checkbox  :label="item.areaId" :key="index" @change="handleCheckAllCity" style="min-width: 165px;margin: 5px 10px">{{item.name}}</el-checkbox>
                                                <!-- </el-checkbox-group> -->
                                            </div>
                                        </el-popover>
                                    </el-checkbox-group>
                                </div>
                               
                            </div>
                        </div>
                      </div>

                    <div class="productbox" v-if="false">
                        <div class="box_header">
                            <Row class="nav">
                                <Col span="22">
                                    <Breadcrumb separator=">">
                                        <BreadcrumbItem to="/">RFM属性</BreadcrumbItem>
                                        <BreadcrumbItem to="/components/breadcrumb">首次购买商品</BreadcrumbItem>
                                    </Breadcrumb>
                                </Col>
                                <Col span="2">
                                    <button class="btn_del" @click="handleRemove(item.id)"><Icon size="24" type="ios-trash" /></button>
                                </Col>
                            </Row>
                        </div>
                        <div style="margin:2vh 0px 0px 1vw;">
                            <Button type="primary" @click="modal2 = true">请选择商品</Button>
                            <Modal
                                v-model="modal1"
                                title="选择商品"
                                @on-ok="ok"
                                @on-cancel="cancel">
                                <Form ref="modalformValidate" :model="modalformValidate" :rules="rulemodalValidate" :label-width="80">
                                    <Row>
                                        <Col span="24" >
                                            <FormItem label="选择店铺：" prop="store" :label-width="90">
                                                <Select v-model="modalformValidate.store" placeholder="请选择" style="width:200px;"  clearable>
                                                    <Option value="unlimited">不限</Option>
                                                    <Option value="menshop">男店</Option>
                                                    <Option value="womenshop">女店</Option>
                                                </Select>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span="12" >
                                            <FormItem label="" prop="productcondition">
                                                <Row>
                                                    <Col span="6">
                                                        <FormItem label="" prop="productcondition">
                                                            <Select v-model="modalformValidate.productcondition"  clearable style="width:100px;margin:4vh 0px 0px -5vw;">
                                                                <Option value="unlimited" selected>商品名称</Option>
                                                                <Option value="menshop">商品编码</Option>
                                                                <Option value="womenshop">商品ID</Option>
                                                            </Select>
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="6" style="width:200px;margin:-4.5vh 0px 0px 4vw;">
                                                        <FormItem label="" prop="condition">
                                                            <Input search enter-button="Search" placeholder="输入商品条件进行搜索" v-model="modalformValidate.condition" clearable />
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="6" style="width:50px;margin:-4.5vh 0px 0px 19vw;">
                                                        <Button icon="ios-search" @click="modalhandleSubmit('modalformValidate')"></Button>
                                                    </Col>
                                                </Row>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span="24" style="margin-top:4vh;margin-left:-5vw;">
                                            <FormItem label="">
                                                    <Row>
                                                        <Col span="24">
                                                            <Checkbox label="" style="position:absolute;"></Checkbox>
                                                            <div :style="product_container">
                                                                <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070163216-000000000620651280_1.jpg_400w_400h_4e" alt="" style="width:70px;height:70px;">
                                                                <div :style="pruduct_info_box">
                                                                    <p :style="product_info_text">18本精油盈润沐浴露迷迭香与玫瑰香熏650ml送清润沐浴露963333333</p>
                                                                    <p :style="product_price">￥99.90</p>
                                                                    <p :style="product_price_time">商品修改时间：2018-07-26&nbsp;12:23:00</p>
                                                                </div>
                                                            </div>
                                                        </Col>
                                                    </Row>
                                                    <Row>
                                                        <Col span="24">
                                                            <Checkbox label="" style="position:absolute;"></Checkbox>
                                                            <div :style="product_container">
                                                                <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070163216-000000000620651280_1.jpg_400w_400h_4e" alt="" style="width:70px;height:70px;">
                                                                <div :style="pruduct_info_box">
                                                                    <p :style="product_info_text">18本精油盈润沐浴露迷迭香与玫瑰香熏650ml送清润沐浴露963333333</p>
                                                                    <p :style="product_price">￥99.90</p>
                                                                    <p :style="product_price_time">商品修改时间：2018-07-26&nbsp;12:23:00</p>
                                                                </div>
                                                            </div>
                                                        </Col>
                                                    </Row>
                                                    <Row>
                                                        <Col span="24">
                                                            <Checkbox label="" style="position:absolute;"></Checkbox>
                                                            <div :style="product_container">
                                                                <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070163216-000000000620651280_1.jpg_400w_400h_4e" alt="" style="width:70px;height:70px;">
                                                                <div :style="pruduct_info_box">
                                                                    <p :style="product_info_text">18本精油盈润沐浴露迷迭香与玫瑰香熏650ml送清润沐浴露963333333</p>
                                                                    <p :style="product_price">￥99.90</p>
                                                                    <p :style="product_price_time">商品修改时间：2018-07-26&nbsp;12:23:00</p>
                                                                </div>
                                                            </div>
                                                        </Col>
                                                    </Row>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row type="flex" justify="center" class="code-row-bg">
                                        <Col style="margin-top:2vh;">
                                            <Page show-total :total="totals" :page-size="pageSizes" @on-change="pageables" show-sizer show-elevator></Page>
                                        </Col>
                                    </Row>
                                </Form>
                            </Modal>
                        </div>
                    </div>
                    <div class="productbox" v-if="false">
                        <div class="box_header">
                            <Row class="nav">
                                <Col span="22">
                                    <Breadcrumb separator=">">
                                        <BreadcrumbItem to="">RFM属性</BreadcrumbItem>
                                        <BreadcrumbItem to="">订单筛选</BreadcrumbItem>
                                    </Breadcrumb>
                                </Col>
                                <Col span="2">
                                    <button class="btn_del" @click="handleRemove(item.id)"><Icon size="24" type="ios-trash" /></button>
                                </Col>
                            </Row>
                        </div>
                        <div style="margin:2vh 0px 0px 1vw;">
                            <Button type="primary" @click="modal4 = true">请选择商品</Button>
                            <Modal
                                v-model="modal1"
                                title="选择商品"
                                @on-ok="ok"
                                @on-cancel="cancel">
                                <Form ref="modalformValidate" :model="modalformValidate" :rules="rulemodalValidate" :label-width="80">
                                    <Row>
                                        <Col span="24" >
                                            <FormItem label="选择店铺：" prop="store" :label-width="90">
                                                <Select v-model="modalformValidate.store" placeholder="请选择"  clearable style="width:200px;">
                                                    <Option value="unlimited">不限</Option>
                                                    <Option value="menshop">男店</Option>
                                                    <Option value="womenshop">女店</Option>
                                                </Select>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span="12" >
                                            <FormItem label="" prop="productcondition">
                                                <Row>
                                                    <Col span="6">
                                                        <FormItem label="" prop="productcondition">
                                                            <Select v-model="modalformValidate.productcondition" style="width:100px;margin:4vh 0px 0px -5vw;">
                                                                <Option value="unlimited" selected>商品名称</Option>
                                                                <Option value="menshop">商品编码</Option>
                                                                <Option value="womenshop">商品ID</Option>
                                                            </Select>
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="6" style="width:200px;margin:-4.5vh 0px 0px 4vw;">
                                                        <FormItem label="" prop="condition">
                                                            <Input search enter-button="Search" placeholder="输入商品条件进行搜索" v-model="modalformValidate.condition" clearable />
                                                        </FormItem>
                                                    </Col>
                                                    <Col span="6" style="width:50px;margin:-4.5vh 0px 0px 19vw;">
                                                        <Button icon="ios-search" @click="modalhandleSubmit('modalformValidate')"></Button>
                                                    </Col>
                                                </Row>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span="24" style="margin-top:4vh;margin-left:-5vw;">
                                            <FormItem label="">
                                                    <Row>
                                                        <Col span="24">
                                                            <Checkbox label="" style="position:absolute;"></Checkbox>
                                                            <div :style="product_container">
                                                                <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070163216-000000000620651280_1.jpg_400w_400h_4e" alt="" style="width:70px;height:70px;">
                                                                <div :style="pruduct_info_box">
                                                                    <p :style="product_info_text">18本精油盈润沐浴露迷迭香与玫瑰香熏650ml送清润沐浴露963333333</p>
                                                                    <p :style="product_price">￥99.90</p>
                                                                    <p :style="product_price_time">商品修改时间：2018-07-26&nbsp;12:23:00</p>
                                                                </div>
                                                            </div>
                                                        </Col>
                                                    </Row>
                                                    <Row>
                                                        <Col span="24">
                                                            <Checkbox label="" style="position:absolute;"></Checkbox>
                                                            <div :style="product_container">
                                                                <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070163216-000000000620651280_1.jpg_400w_400h_4e" alt="" style="width:70px;height:70px;">
                                                                <div :style="pruduct_info_box">
                                                                    <p :style="product_info_text">18本精油盈润沐浴露迷迭香与玫瑰香熏650ml送清润沐浴露963333333</p>
                                                                    <p :style="product_price">￥99.90</p>
                                                                    <p :style="product_price_time">商品修改时间：2018-07-26&nbsp;12:23:00</p>
                                                                </div>
                                                            </div>
                                                        </Col>
                                                    </Row>
                                                    <Row>
                                                        <Col span="24">
                                                            <Checkbox label="" style="position:absolute;"></Checkbox>
                                                            <div :style="product_container">
                                                                <img src="https://image5.suning.cn/uimg/b2c/newcatentries/0070163216-000000000620651280_1.jpg_400w_400h_4e" alt="" style="width:70px;height:70px;">
                                                                <div :style="pruduct_info_box">
                                                                    <p :style="product_info_text">18本精油盈润沐浴露迷迭香与玫瑰香熏650ml送清润沐浴露963333333</p>
                                                                    <p :style="product_price">￥99.90</p>
                                                                    <p :style="product_price_time">商品修改时间：2018-07-26&nbsp;12:23:00</p>
                                                                </div>
                                                            </div>
                                                        </Col>
                                                    </Row>
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row type="flex" justify="center" class="code-row-bg">
                                        <Col style="margin-top:2vh;">
                                            <Page show-total :total="totals" :page-size="pageSizes" @on-change="pageables" show-sizer show-elevator></Page>
                                        </Col>
                                    </Row>
                                </Form>
                            </Modal>
                        </div>
                    </div>
                </FormItem>
              </Form>
            </div>
         </div>
      </Col>
    </Row>

    <Row style="margin-top:2vh;">
      <Col span="10" push="14">
        <Button type="primary" @click="handleSubmit('formDynamic', 0)">保存动态分组</Button>
        <Button type="primary" @click="handleSubmit('formDynamic', 1)">保存静态分组</Button>
      </Col>
    </Row>
  </div>

 </div>
</template>
<script>
import {mapState, mapMutations, mapActions} from 'vuex'
import { criteriaList, criteriaListAll, fetchChannelList, fetchLeveltList, targetSave, targetCategoryTableList, targetNameSearch, getTargetById } from '@/api/customer'
export default {
    name:'AddCustomerGroup',
    data () {
      const validateText = (rule, value, callback) => {
        var myreg = "[`~!@#$^&*()=|{}':;'\\\\[\\\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。、？]";
        if (!myreg.test(value)) {
          callback(new Error("包含非法字符！"));
        } else {
          callback();
        }
      };
      const validateorderNumber = (rule, value, callback) => {
          if(!value){
                  callback(new Error('请输入订单编号'));
          }else{
              if(value % 1 != 0){
                  callback(new Error("请输入整数类型的订单编号"));
              }else{
                  callback();
              }
          }
      };
      return {
        targetId:this.$route.params.id,
        targetData: {},
        currentProvinceId: '',
        model1:'',
        model2:'',
        modal1: false,
        modal2: false,
        modal3: false,
        modal4: false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        totals: 0,
        pageNums: 1,
        pageSizes: 10,
        marketgrouplist:[],
        basicAttrtitle:'',
        conditionlist:[{}, {}, {}, {}, {}, {}],
        singleInputAttr:[],//单个输入框
        regionAttr:[],//区间输入框
        enumAtrr:[],//多值下选框
        addressAttr:[],//城市多选框
        provinceAreaIdList: [],//省份areaId数组
        checked:false,
        checkcity:false,
        isIndeterminate: true,    // 全选
        checkAll: false,
        checkAllGroup: [],
        checkcityAll:false,
        checkAllCityGroup: [],

        index: 1,
        basiclist:[],
        sexlist:[],
        channellist:[],
        levellist:[],
        formDynamic: {
          b_TmallNick: '',
          name: '',
          targetCategoryId: 0,
          items: [],
          groupcityList:[],
        },
        formDynamics: {
            items: [
                {
                    value: '',
                    index: 1,
                    status: 1
                }
            ],
            // type:''
        },
        modalformValidate: {    //模态框参数
            store:'',
            productcondition:'',
            condition:'',
            checkbox: [],
        },
        rulemodalValidate:{  // 商品条件模态框验证
            store: [
                { required: true, type: 'string', message: '请选择店铺', trigger: 'change' },
            ],
            productcondition: [
                {  type: 'string', message: '请选择商品条件', trigger: 'change' },
            ],
            condition: [
                { required: true, type: 'string', min: 1, message: '请输入商品条件', trigger: 'blur' },
            ],
        },
        paramDomList: [
        ],
        noRecycelTabs: [],
        loadingSearch: false,
        ruleValidateSave: {},
      }
    },
    methods:{
      ...mapMutations(["FETCH_PROVINCE", "FETCH_CITY", "FETCH_DISTRICT"]),
      ...mapActions(["fetchprovinceLists", "fetchcityList", "fetchdistrictList"]),
      //搜索名称是否重复
      ruleValidate(){
        if(this.formDynamic.name == ""){
          this.$Notice.warning({
            title: " 提示信息",
            desc: "搜索内容不能为空!"
          });
        }else{
          var reqParams = {
            name: this.formDynamic.name
          };
          targetNameSearch(reqParams).then(res=>{
            if (res.data.code == 200) {
              this.$Notice.success({
                title: "提示信息",
                desc: "分组名称可以使用!"
              });
            }else{
              this.$Notice.warning({
                title: "提示信息",
                desc: res.data.msg
              });
            }
          }).catch(error=>{
            this.$Message.error("操作失败【" + error + "】");
          })
        }
        this.loadingSearch = false;
      },
      //所有筛选条件
      FetchFilterData() {
        this.TableLoading = true;
        var reqParams = {};
        criteriaList(reqParams).then(res=>{
          this.TableLoading = true;
          if (res.data.code == 200) {
              this.conditionlist = res.data.data;
          }
        }).catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
        })
      },

      getTargetById(){
      //加载编辑的数据
      if (this.targetId){
          getTargetById(this.targetId).then(res=>{
            if (res.data.code == 200) {
              this.targetData = res.data.data;
              var targetParamData = JSON.parse(this.targetData.targetJsonText);
              this.formDynamic.name = targetParamData.name;
              this.formDynamic.items = targetParamData.fieldValues;
            }
          }).catch(error=>{
            this.$Message.error("操作失败【" + error + "】");
          })
        }
      },

      //所有筛选条件
      criteriaListAll() {
        var reqParams = {};
        criteriaListAll(reqParams).then(res=>{
          if (res.data.code == 200) {
            let data = res.data.data;
            this.singleInputAttr = data.filter( p => p.componentType == 'single');
            this.regionAttr = data.filter( p => p.componentType == 'region');
            this.enumAtrr = data.filter( p => p.componentType == 'enum');
            this.enumAtrr.forEach( value=> {
              let enumMapObject = [];
              if (value.enumMap != null && value.enumMap.indexOf("[{") != -1){
                enumMapObject = JSON.parse(value.enumMap);
                value.optionType = 1;
              }else if (value.enumMap != null && value.enumMap == 'crm_level_rule'){
                enumMapObject = this.levellist;
                value.optionType = 2;
              }else if (value.enumMap != null && value.enumMap == 'crm_channel'){
                enumMapObject = this.channellist;
                value.optionType = 2;
              }
              if (!enumMapObject){
                enumMapObject = [];
              }
              value.optionList = enumMapObject;
            });
            this.addressAttr = data.filter( p => p.componentType == 'address');
            this.addressAttr.forEach(address =>{
              address.indeterminate = true;
              address.checkAll = false;
            })
          }
        }).catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
        })
      },
      //查询人群类别tabs
      targetCategoryTableList(params) {
        var reqParams = {};
        targetCategoryTableList(reqParams).then(res => {

          if (res.data.code == 200) {
            var tabDefault = [{
              name:'默认分组',
              id: 0,
              selected: true
            }];
            var tabArr = res.data.data;
            this.noRecycelTabs = tabDefault.concat(tabArr);
          }
        })
          .catch(error => {
            this.$Message.error(error);
          });
      },
      // 请求渠道表
      Fetchchannellist() {
        var reqParams = {};
        fetchChannelList(reqParams).then(res=>{
          if (res.data.code == 200) {
            this.channellist = res.data.data;
            this.channellist.forEach(value=>{
              value.value = value.id;
            })
          }
        }).catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
        });
      },
      // 请求省份列表
      FetchprovinceList(){
        this.$store.dispatch('fetchprovinceLists');
        this.$store.state.provincelist.forEach(item =>{
          this.provinceAreaIdList.push(item.areaId);
        })

      },
      // 请求会员等级列表
      FetchlevelList(){
        var reqParams = {};
        fetchLeveltList(reqParams).then(res=>{
          if (res.data.code == 200) {
            this.levellist = res.data.data;
            this.levellist.forEach(value=>{
              value.name = value.levelName;
              value.value = value.levelId;
            })
          }
        }).catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
        });
      },
      // 添加（取消）对应属性
      handleAdd (items, index) {
        // 判断 formDynamic.items 中是否包含当前items
        const exist = this.formDynamic.items.some( p => p.id === items.id);
        if (!exist) {
          this.formDynamic.items.push(items);
        } else {
          this.formDynamic.items = this.formDynamic.items.filter( p => p.id !== items.id);
        }
      },
      // 删除右边菜单
      handleRemove (id) {
        this.formDynamic.items = this.formDynamic.items.filter( p => p.id !== id);
      },
      //保存分组
      handleSubmit (name, type) {
        if(this.formDynamic.name == "" && this.formDynamic.name.length <=0){
          this.$Notice.warning({
            title: " 提示信息",
            desc: "分组名称不能为空!"
          });
        }else {
          var reqParams = {
            id: this.targetId,
            name: this.formDynamic.name,
            targetCategoryId: this.formDynamic.targetCategoryId,
            isFixedTarget: type,
            fieldValues: this.formDynamic.items,
            groupcityList: this.formDynamic.groupcityList
          };
          targetSave(reqParams).then(res=>{
            if (res.data.code == 200) {
              this.$Message.success('保存成功!');

              this.$router.push({path:'/customer/CustomerGroupIndex'});
            }
          }).catch(error=>{
            this.$Message.error("保存失败【" + error + "】");
          });
        }
      },

      handleCheckAllProvince (addressindex) {
        let provincelists = [];
        let cityList = [];
        let cityidlist = [];
        /*for(let i = 0;i < this.$store.state.provincelist.length; i++){
            provincelists.push(this.$store.state.provincelist[i].areaId);
            this.$store.dispatch('fetchcityList',this.$store.state.provincelist[i].areaId);
            cityList = this.$store.state.cities; // 所有城市id
            this.formDynamic.groupcityList = cityList;
        };*/
        if (this.addressAttr[addressindex].indeterminate) {
          this.addressAttr[addressindex].checkAll = false;
        } else {
          this.addressAttr[addressindex].checkAll = !this.addressAttr[addressindex].checkAll;
        }
        this.addressAttr[addressindex].indeterminate = false;
        this.addressAttr[addressindex].checkAllGroup = this.addressAttr[addressindex].checkAll ? this.provinceAreaIdList : [];  //所有省份id

      },
      checkProvince (value) {   
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.checkAllGroup.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkAllGroup.length;
      },

       handleCheckAllCity (value) {
        if (this.indeterminate) {
             this.checkcityAll = false;
        } else {
            this.checkcityAll = !this.checkcityAll;
        }
            this.indeterminate = false;

        if (this.checkcityAll) {
            let citylists = [];
           for(var i = 0;i < this.$store.state.citylist.length; i++){
                citylists.push(this.$store.state.citylist[i].areaId);
            };
            this.checkAllCityGroup = citylists;
             this.formDynamic.groupcityList =  this.checkAllCityGroup;
        } else {
            this.checkAllCityGroup = [];
        }
      },
      checkAllCityGroupChange (val) {
        let checkedCount = value.length;
        this.checkcityAll = checkedCount === this.checkAllCityGroup.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkAllCityGroup.length;
      },

      showPopover(id){
          this.$store.dispatch('fetchcityList',id);
      },

      // 选择商品
      ok () {
          this.$Message.info('Clicked ok');
      },
      cancel () {},
      pageables(current) { //切换商品分页
          this.pageNum = current;
          // this.fetchQuestionList();
      },
      FetchDatalist(){
        this.FetchFilterData();
        this.Fetchchannellist();
        this.FetchlevelList();
        this.criteriaListAll();
        this.targetCategoryTableList();
        this.FetchprovinceList();
        this.getTargetById();
      },
    },

    computed:{
      ...mapState(["provincelist", "citylist"]),
        product_container(){     // 模态框查询结果样式
            return {
                width:'95%',
                border:'1px solid #e6f2ff',
                marginLeft:'1.5vw',
            }
        },
        pruduct_info_box(){
            return {
                width:'78%',
                height:'90%',
                position:'absolute',
                margin:'-10vh 0px 0px 5vw',
            }
        },
        product_info_text(){
            return {
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                paddingLeft:'10px',
                marginTop:'-2vh',
            }
        },
        product_price(){
            return {
                color:'red',
                fontSize:'0.7rem',
                paddingLeft:'10px',
                marginTop:'-2vh',
                marginTop:'-2vh',
            }
        },
        product_price_time(){
            return {
                color:'gray',
                fontSize:'0.7rem',
                paddingLeft:'10px',
                marginTop:'-2vh',
            }
        },
    },
  created(){
    this.FetchDatalist();
  },
  components:{
  },
  mounted () {

  },
}
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.addcustomergroup_container {
  .active{
      border: 1px solid #8fc3ff;
      color: #8fc3ff;
      background-color: #ecf6ff;
  }
  @include container_global;
  .nav {
    height: 35px;
    padding-left: 2vw;
    line-height: 35px;
    background-color: #fff;
    .addcustomergroup_title {
      font-family: Times;
      font-weight: bolder;
    }
  }
  .search_box {
    margin: 2vh 0px 2vh 2vw;
  }
  .condition_box {
    width: 100%;
    height: 100%;
    background-color: #fff;
    .condition_box_left {   //左侧条件拖拽区域
      width: 100%;
      min-height: 80vh;
      padding-left: 2vw;
      background-color: #fff;
      .condition_box_left_header {
        width: 100%;
        height: 5vh;
        .condition_box_left_header_number {
          display: inline-block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          color: #fff;
          background-color: lightskyblue;
          text-align: center;
        }
      }
      .condition_box_left_box {
        width: 100%;
        margin-top: 1vh;
        min-height: 80vh;
        border: 1px solid #ccc;
        .basic_attr_box{
          @include condition_box_global;
          .integral_info_title {
             @include title_global;
           }
          .tag{
              margin: 5px;
              padding: 4px;
          }
        }
      }
    }
    .condition_box_right{   //拖拽放置区域
        width: 98%;
        min-height: 80vh;
        margin-left: 1vw;
        background-color: #fff;
       .condition_box_right_header{
         width: 100%;
         height: 5vh;
         .condition_box_right_header_number {
          display: inline-block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          color: #fff;
          background-color: lightskyblue;
          text-align: center;
        }
       }
       .condition_box_right_box{
          width: 100%;
          margin-top: 1vh;
          min-height: 73vh;
          border: 1px solid #ccc;
          .enumbox{
            @include component_global_stlye;
            .box_header{
              @include component_box_header;
              .nav{
                  @include component_box_nav;
                  .btn_del{
                      @include component_box_btn_del;
                      background-color: transparent;
                  }
                  }

              }
            .ivu-checkbox-wrapper{
              margin-right: 0;
            }
            .ivu-poptip{
              padding: 0 5px;
              cursor: pointer;
            }
          }
          .singlebox{
               @include component_global_stlye;
              .box_header{
              @include component_box_header;
              .nav{
                  @include component_box_nav;
                  .btn_del{
                      @include component_box_btn_del;
                      background-color: transparent;
                  }
              }
            }
          }
          .reginbox{
               @include component_global_stlye;
              .box_header{
                @include component_box_header;
                .nav{
                    @include component_box_nav;
                    .btn_del{
                      @include component_box_btn_del;
                      background-color: transparent;
                  }
                }
            }
          }
          .targetbox{
            @include component_global_stlye;
            .box_header{
                @include component_box_header;
                .nav{
                    @include component_box_nav;
                    .btn_del{
                        padding: 0px 1vw 0px 0px;
                        border: none;
                        outline: none;
                        background-color: transparent;
                        text-align: center;
                        &:hover{
                            cursor: pointer;
                        }
                  }
                }
            }
          }
          .productbox{
             @include component_global_stlye;
             .box_header{
                @include component_box_header;
                .nav{
                    @include component_box_nav;
                    .btn_del{
                        padding: 0;
                        border: none;
                        outline: none;
                        background-color: transparent;
                        text-align: center;
                        &:hover{
                            cursor: pointer;
                        }
                  }
                }
            }
          }
      }
    }
  }
}
</style>
